<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box2 {
      width: 400px;
      height: 250px;
      border: 4px solid #000;
      margin: 30px auto;
      /* 溢出隐藏 */
      overflow: hidden;
    }
    ul {
      width: 2000px;
      height: 250px;
      background-color: aquamarine;
      display: flex;
      transition: all 0.6s;
      transform: translateX(0px);
    }
    li {
      flex: 1;
      list-style: none;
    }
    img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="box2">
    <ul>
      <li>
        <img src="https://img.alicdn.com/imgextra/i2/O1CN01jH9w4F1sEDtCgpH3r_!!6000000005734-0-tps-846-472.jpg" alt="">
      </li>
      <li>
        <img src="https://img.alicdn.com/imgextra/i4/O1CN01GOlEEW1zidUliI8O7_!!6000000006748-2-tps-846-472.png" alt="">
      </li>
      <li>
        <img src="https://img.alicdn.com/imgextra/i4/O1CN01cmWoxh1S6H07yrmcM_!!6000000002197-0-tps-846-472.jpg" alt="">
      </li>
      <li>
        <img src="https://img.alicdn.com/imgextra/i4/O1CN01LHWdyp1yvAidcNMDR_!!6000000006640-0-tps-846-472.jpg" alt="">
      </li>

      <li>
        <img src="https://img.alicdn.com/imgextra/i2/O1CN01jH9w4F1sEDtCgpH3r_!!6000000005734-0-tps-846-472.jpg" alt="">
      </li>
    </ul>
  </div>

  <button class="left">左</button>
  <button class="right">右</button>
  
  <div class="dotList">
    <button class="dot">1</button>
    <button class="dot">2</button>
    <button class="dot">3</button>
    <button class="dot">4</button>
  </div>


  <script>
    var left = document.querySelector(".left");
    var right = document.querySelector(".right");
    var imgList = document.querySelector("ul");

    var dotList = document.querySelectorAll(".dot");
    var box2 = document.querySelector(".box2")

    var index = 0; 

    function rightClick() {
      // 开启动画
      imgList.style.transition = "all 0.6s";

      // 当最后的那个第一张进来，并且动画结束的时候，瞬间切换到真正的第一张
      index++;
      imgList.style.transform = "translateX(" + (index * -400) + "px)";

      // 需要等待动画(0.6秒钟)结束
      // 需要一个延迟的定时器
      setTimeout(function() {
        if (index === 4) {
          // 取消过渡效果
          imgList.style.transition = "none";
          index = 0;
          imgList.style.transform = "translateX(" + (index * -400) + "px)";
        }
      }, 600);


      // if (index === 4) {
      //   index = 0;
      // } else {
      //   index++;
      // }
      // // 修改行内的样式
      // imgList.style.transform = "translateX(" + (index * -400) + "px)";
    }

    // 给指示点添加点击事件
    for (let i = 0; i < dotList.length; i++) {
      dotList[i].onclick = function() {
        // console.log(i);
        // 同步索引
        index = i;
        imgList.style.transform = "translateX(" + (i * -400) + "px)";
      }
    }

    // 右边按钮的点击事件
    right.onclick = function() {
      rightClick();
    }
    // 左边按钮的点击事件
    left.onclick = function() {
      if (index === 0) {
        index = 4;
      } else {
        index--;
      }
      // 修改行内的样式
      imgList.style.transform = "translateX(" + (index * -400) + "px)";
    }

    // 每4000毫秒执行这个函数
    var timer = setInterval(function() {
      rightClick();
    }, 3000);

    box2.onmouseenter = function() {
      clearInterval(timer)
    }
    box2.onmouseleave = function () {
      timer = setInterval(function() {
        rightClick();
      }, 3000);
    }
  </script>
</body>
</html>